<template>
  <AtomSwitch
    v-model:value="activeList"
    left-block-label="Все"
    right-block-label="Избранные"
  >
    <template #prefix-left-block-icon>
      <SvgoList
        :class="[
          { 'text-c-grey-medium': activeList === 'right' },
          { 'text-c-grey-xl': activeList === 'left' }
        ]"
        filled
      />
    </template>
    <template #prefix-right-block-icon>
      <SvgoStarDisabled
        :class="[
          { 'text-c-grey-medium': activeList === 'left' },
          { 'text-c-grey-xl': activeList === 'right' }
        ]"
        class="scale-125"
        filled
      />
    </template>
  </AtomSwitch>
</template>

<script setup lang="ts">
const router = useRouter()
const route = useRoute()
const activeList: Ref<'left' | 'right'> = ref('left')

watch(activeList, () => {
  if (activeList.value === 'left') {
    router.push({ name: 'index' })
  } else {
    router.push({ name: 'favorites' })
  }
})

onBeforeMount(() => {
  if (route.name === 'favorites') {
    activeList.value = 'right'
  } else {
    activeList.value = 'left'
  }
})
</script>

<style scoped></style>
